<!--
 * @Author: 杨伟韦
 * @Date: 2023-04-06 22:26:57
 * @LastEditors: 杨伟韦
 * @LastEditTime: 2024-10-07 17:15:32
 * @Description: 蒙版
-->

<template>
  <div v-if="(isOne && type === 'image') || isMask" class="attr-item-box">
    <div class="bg-item">
      <Button v-if="!isMask" @click="handleCropImg" type="text" long>{{ $t('maskImg') }}</Button>
      <Button v-if="isMask" @click="handleSaveImg" type="text" long>
        {{ $t('saveMaskImg') }}
      </Button>
      <Button v-if="isMask" @click="handleCancel" type="text" long>
        {{ $t('cancelMaskImg') }}
      </Button>
    </div>
  </div>
</template>

<script setup name="RemoveBackground">
import useSelect from '@/hooks/select';

const update = getCurrentInstance();
const { canvasEditor, isOne, fabric } = useSelect();
const type = ref('');
// 是否蒙版中
const isMask = ref(false);
let currentImage, clipPath, currentImageCopy;

const handleCropImg = () => {
  currentImage = canvasEditor.canvas.getActiveObject();
  currentImageCopy = fabric.util.object.clone(currentImage);

  if (!currentImage || currentImage.type !== 'image') return;

  clipPath = currentImage.clipPath;
  isMask.value = true;

  // 如果没有裁剪区域，则返回
  if (!clipPath) return;
  currentImage.set('clipPath', null);

  canvasEditor.canvas.on('object:removed', () => {
    console.log('del');
    clipPath = null;
  });

  /**
   * 计算裁剪区域的位置
   * 裁剪是居中的，但是新增区域后是在左上角，需要转换
   */
  let imgWidth = currentImage.getScaledWidth();
  let imgHeight = currentImage.getScaledHeight();
  let left = imgWidth / 2 + currentImage.left + clipPath.left;
  let top = imgHeight / 2 + currentImage.top + clipPath.top;
  clipPath.set({
    left,
    top,
    fill: 'rgba(0,0,0,0.2)',
    stroke: 'black',
    opacity: 1,
    hasRotatingPoint: false,
    transparentCorners: false,
    cornerColor: 'white',
    cornerStrokeColor: 'black',
    borderColor: 'black',
    cornerSize: 12,
    padding: 0,
    cornerStyle: 'circle',
    borderDashArray: [5, 5],
    borderScaleFactor: 1.3,
    id: 'currentClipRect',
    // lockMovementX: true,
    // lockMovementY: true,
    hoverCursor: 'default',
  });

  canvasEditor.canvas.add(clipPath);
  canvasEditor.canvas.setActiveObject(clipPath);
  canvasEditor.canvas.renderAll();
};

const handleSaveImg = () => {
  isMask.value = false;
  if (!clipPath) return;

  const _clipPath = fabric.util.object.clone(clipPath);
  canvasEditor.canvas.remove(clipPath);
  canvasEditor.canvas.renderAll();

  console.log(_clipPath, currentImage);
  let imgWidth = currentImage.getScaledWidth();
  let imgHeight = currentImage.getScaledHeight();

  let left = clipPath.left - imgWidth / 2 - currentImage.left;
  let top = clipPath.top - imgHeight / 2 - currentImage.top;
  _clipPath.set({
    left,
    top,
    fill: 'rgba(0,0,0,1)',
  });
  currentImage.clipPath = _clipPath;
  canvasEditor.canvas.setActiveObject(currentImage);
  canvasEditor.canvas.renderAll();
  currentImage = null;
  clipPath = null;
  currentImageCopy = null;
};

const handleCancel = () => {
  isMask.value = false;

  if (clipPath) canvasEditor.canvas.remove(clipPath);
  canvasEditor.canvas.remove(currentImage);
  canvasEditor.canvas.add(currentImageCopy);
  canvasEditor.canvas.setActiveObject(currentImageCopy);
  canvasEditor.canvas.renderAll();
  clipPath = null;
  currentImage = null;
  currentImageCopy = null;
};

const init = () => {
  const activeObject = canvasEditor.canvas.getActiveObjects()[0];
  if (activeObject) {
    type.value = activeObject.type;
    console.log(activeObject.type);
    update?.proxy?.$forceUpdate();
  }
};

onMounted(() => {
  canvasEditor.on('selectOne', init);
});

onBeforeUnmount(() => {
  canvasEditor.off('selectOne', init);

  const isMask = ref(false);
  isMask.value = false;
  currentImage = null;
  clipPath = null;
  currentImageCopy = null;
});
</script>
<style lang="less" scoped>
.attr-item-box {
  margin-top: 8px;
}
</style>
